<template>
    <main>
        <div class="flex flex-row">
            <div class=" flex flex-wrap flex-row w-[260px] content-start border-gray show-height overflow-y-auto">
                <div class="border-gray m-[6px] cursor-pointer hover:bg-primary-light-3 w-[46px] h-[46px] text-center leading-[50px]"
                    :class="lastFocusPageIndex == index ? 'page-item-focus' : ''" v-for="(item, index) in pageList"
                    @click="onClickPageItem(index)">{{ item.pageNum }}</div>
            </div>
            <div class="flex flex-1 flex-col affix-container">
                <div class="top" v-if="false">

                    <el-affix target=".affix-container" :offset="90" v-if="choseMarkQuest.imgUrl" >
                        <el-card >
                            <template #header>
                                        <div class=" flex flex-row justify-between ">
                                            <div class="">
                                                <el-button class="button" v-if="choseMarkQuest.index"
                                                    @click="onClickDelMarkQuest(choseMarkQuest.index)">取消关联</el-button>
                                            </div>
                                        </div>
                                    </template>
                                    <div class=" max-h-40 overflow-y-auto">
                                        <img :src="choseMarkQuest.imgUrl" />
                                    </div>
                        </el-card>
                    </el-affix>

                </div>
                <div class="quest-area flex felx-row affix-container-mark ">

                    <div class="mark-list  w-4/12   mx-4 border-primary-light-3 show-height overflow-y-auto" >
                        <div v-if="markList.length==0" class="text-center">
                            <span>没有题目块数据</span>
                        </div>

                        <div v-for="(item, index) in markList" class=" mt-3 cursor-pointer "
                            :class="index == lastFocusMarkIndex ? 'mark-focus' : ''">

                            <el-card v-if="index == lastFocusMarkIndex">
                                    <template #header>
                                        <div class=" flex flex-row justify-between">
                                            <!-- <span v-if="item.questId">关联题目id:{{ item.questId }}</span> -->
                                            <div class="">
                                                <el-button class="button" v-if="item.questId"
                                                    @click="onClickShowQuest(index)">查看关联</el-button>
                                                <el-button class="button" v-if="item.questId"
                                                    @click="onClickDelMarkQuest(index)">取消关联</el-button>
                                                <el-button class="button" v-if="!item.questId"
                                                    @click="onClickMark(index)">选择关联</el-button>
                                            </div>

                                        </div>
                                    </template>
                                    <img :src="item.imgUrl" />
                                </el-card>

                            <el-card v-else>
                                <template #header>
                                    <div class=" flex flex-row justify-between">
                                        <!-- <span v-if="item.questId">关联题目id:{{ item.questId }}</span> -->
                                        <div class="">
                                            <el-button class="button" v-if="item.questId"
                                                @click="onClickShowQuest(index)">查看关联</el-button>
                                            <el-button class="button" v-if="item.questId"
                                                @click="onClickDelMarkQuest(index)">取消关联</el-button>
                                            <el-button class="button" v-if="!item.questId"
                                                @click="onClickMark(index)">选择关联</el-button>
                                        </div>

                                    </div>
                                </template>
                                <img :src="item.imgUrl" />
                            </el-card>
                        </div>
                    </div>
                    <div class="quest-list  flex-1 mx-4 show-height overflow-y-auto" ref="questBlock" id="output">

                        <el-card v-for="(item, index) in questList" class=" cursor-pointer hover:border mt-3"
                            :class="index == lastFocusQuestIndex ? 'quest-focus' : ''">
                            <template #header>
                                <div class=" flex flex-row justify-between">
                                    <div class=" flex flex-row justify-between" v-if="!(markList[lastFocusMarkIndex]&&markList[lastFocusMarkIndex].questId)">
                                        <el-button class="button" @click="onClickQuest(index)">关联</el-button>
                                    </div>

                                    <el-tag class="" v-if="item.source===2">学科网</el-tag>
                                    <el-tag class="" v-if="item.source===1">导学</el-tag>
                                    <el-tag class="" v-if="item.source===0">自建</el-tag>
                                </div>
                            </template>
                            <div class="quest-content" v-html="item.question"></div>
                        </el-card>
                    </div>
                </div>
            </div>
        </div>


        <el-dialog v-model="isDelDlgVisible" title="提示" width="30%">
            <span>确定要取消关联吗？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isDelDlgVisible = false">取消</el-button>
                    <el-button type="primary" @click="onClickDelSure()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>


        <el-dialog v-model="isShowQuestDlgVisible" title="" width="60%">
            <el-card>
                <div>
                    <img :src="markList[lastShowQuestIndex].imgUrl" />
                </div>
            </el-card>
            <el-card class="mt-3">
                <div>
                    <div id="dlg-quest" v-html="markList[lastShowQuestIndex].question"></div>
                </div>
            </el-card>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowQuestDlgVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>


    </main>
</template>
<script lang="ts" setup>
import { loadPagesByBookId, getPageQuest as getMarkList } from '@/api/wisdbook/marker'
import { getWithMarkId, add as addMarkQuest, edit as editMarkQuest, del as delMarkQuest } from '@/api/wisdbook/qd/mark'
import { searchQuest } from '@/api/wisdbook/quest'
import { usePaging } from '@/hooks/usePaging'
import { onMounted } from 'vue';
//import katex from 'katex'
//import 'katex/dist/katex.css'
import {renderLatexHtml} from '@/utils/util'
import type { forEach } from 'lodash-es';
const router = useRouter();


let schoolBookId = router.currentRoute.value.query.bookId;

const questBlock = ref({})

const pageList = ref({})
const markList = ref([])
const questList = ref([])

const lastFocusPageIndex = ref(-1);

const lastFocusMarkIndex = ref(-1)
const lastFocusQuestIndex = ref(-1)


const choseMarkQuest = ref({})

const isDelDlgVisible = ref(false)

const isShowQuestDlgVisible = ref(false)

let lastDelMarkIndex = -1;
let lastShowQuestIndex = ref(-1);




const onClickShowQuest = async (index: any) => {
    isShowQuestDlgVisible.value = true
    lastShowQuestIndex.value = index

    if(!markList.value[index].question){
        const ret = await getWithMarkId({ markId: markList.value[index].id })
        console.log('onClickShowQuest ', ret.data);
        markList.value[index].question=ret.data.quest.question
    }

    nextTick(()=>{
        renderLatexHtml(document.getElementById('dlg-quest'))
    })
}


const onClickDelMarkQuest = (index: any) => {
    isDelDlgVisible.value = true
    lastDelMarkIndex = index
}

const onClickDelSure = async () => {
    await delMarkQuest({ id: markList.value[lastDelMarkIndex].markQuestId })
    isDelDlgVisible.value = false

    markList.value[lastDelMarkIndex].markQuestId = null
    markList.value[lastDelMarkIndex].questId = null

    if(choseMarkQuest.value.index === lastDelMarkIndex){
        choseMarkQuest.value.imgUrl=null
        choseMarkQuest.value.index=null
    }

}



const onClickMark = async (index: any) => {
    lastFocusMarkIndex.value = index

    const ret = await getWithMarkId({ markId: markList.value[index].id })
    console.log('onClickMark', ret.data);


    const ret2 = await searchQuest({ markId: markList.value[index].id })
    console.log('questList', ret2);
    questList.value = ret2

    if(ret2.length>0){
        choseMarkQuest.value.imgUrl=markList.value[index].imgUrl
    }else{
        choseMarkQuest.value.imgUrl=null
    }


    nextTick(() => {
        let eles = document.getElementsByClassName("quest-content");
        renderLatexHtml(eles)

    })

}


const onClickQuest = async (index: any) => {
    lastFocusQuestIndex.value = index
    if (lastFocusMarkIndex.value == -1) return;
    const ret = await addMarkQuest({
        questId: questList.value[index].id,
        markId: markList.value[lastFocusMarkIndex.value].id
    });
    console.log('onClickQuest add', ret);
    markList.value[lastFocusMarkIndex.value].markQuestId = ret.id
    markList.value[lastFocusMarkIndex.value].questId = ret.questId
    markList.value[lastFocusMarkIndex.value].question = ret.question

    choseMarkQuest.value.index =lastFocusMarkIndex.value


}


const onClickPageItem = async (index: any) => {

    lastFocusPageIndex.value = index;
    lastFocusMarkIndex.value = -1
    lastFocusQuestIndex.value = -1
    choseMarkQuest.value.imgUrl=null

    const ret = await getMarkList({ pageId: pageList.value[index].id,markType:2 })
    console.log('markList', ret);
    markList.value = ret
    questList.value = []

}

onMounted(async () => {

    const ret = await loadPagesByBookId({ bookId: schoolBookId, pageSize: 1000})
    console.log('hang_quest onMounted', ret);
    pageList.value = ret.pages

})

</script>
<style type="sass" scoped>
:deep(table) {
    border: 1px solid #000;
}

:deep(table td) {
    border: 1px solid #000;
}

:deep(p) {
    word-wrap: break-word;
}

:deep(img){
    display: inline;
}
.mark-focus,
.quest-focus {
    /* background-color: blueviolet; */
}
.border-gray{
    border: 1px solid #aaa;
}
.page-item-focus {
    background-color: var(--el-color-primary-light-3);
}
.show-height{
    height: calc(100vh - 120px);;
}

</style>